<template>
  <div
    class="unflod-container"
    ref="UserUnflodPage"

  >
    <button
      v-if="loginButton"
      class="button  cursor color-black"
      @click="gotoLogin"
    >
      <!-- 登录 -->
      {{ $t('login.login') }}
    </button>
    <button
      v-if="orderHistory"
      class="color-black button  cursor"
      @click="gotoOrder"
    >
      <!-- 历史订单 -->
      {{ $t('order.title') }}
    </button>
    <div class="changeLaguages">
      <button
        :class="['laguages-button', ' cursor',
        {'color-black': isActiveZH}, {'color-white': isActiveUS}]"
        @click="changeLaguagesZH"
      >
        中
      </button>

      <!-- 动态绑定样式，改变类名，isActiveOne，isActiveTwo  -->
      <button
        :class="['laguages-button',' cursor',
        {'color-black': isActiveUS}, {'color-white': isActiveZH}]"
        @click="changeLaguagesEN"
      >
        En
      </button>
    </div>
    <button
      v-if="logout"
      class="button cursor"
      @click="logoutBtn"
    >
      <!-- 登出 -->
      {{ $t('logout') }}
    </button>
  </div>
</template>

<script>
//* 工具组件
import { set } from '@/common/utils'; //* 设置local storage

import { mapState, mapActions } from 'vuex';

export default {
  data() {
    return {

    };
  },
  computed: {
    ...mapState({
      userinfo: (state) => state.login.user,
      loginButton: (state) => state.userUnflod.loginButton,
      orderHistory: (state) => state.userUnflod.orderHistory,
      logout: (state) => state.userUnflod.logout,
      language: (state) => state.language.language,
      Unflod: (state) => state.userUnflod.unflod,
    }),
    isActiveUS() {
      if (this.language === 'en-US') {
        return true;
      }
      return false;
    },
    isActiveZH() {
      if (this.language === 'zh-CN') {
        return true;
      }
      return false;
    },

    loginButton() {
      if (this.userinfo.token) {
        return false;
      } if (this.$route.path === '/login') {
        return false;
      }
      return true;
    },

    orderHistory() {
      if (this.userinfo.token) {
        if (this.$route.path === '/order') {
          return false;
        }
      } else {
        return false;
      }
      return true; // true会显示
    },

    logout() {
      if (this.userinfo.token) {
        return true;
      }
      return false;
    },
  },
  mounted() {
    // 创建实例时绑定全页面点击事件;
    document.documentElement.onclick = (e) => {
      if (!(e.target.className === 'img') && !(e.target.className === 'icon')
      && !(e.target.className === 'unflod-container')) {
        this.hideUserUnflod();
      }
    };

    // console.log('this.Unflod==>', this.Unflod);
    // const userflodDiv = this.$refs.UserUnflodPage;
    // this.$emit('transUnfo', userflodDiv);  // 子传父

    /* if (this.Unflod) {
      console.log('refs==>', this.$refs.UserUnflodPage);
      //   if (this.$refs.UserUnflodPage !== undefined) {
      //     console.log(2222);
      document.addEventListener('click', (e) => {
        console.log(2222);
        if (!this.$refs.UserUnflodPage.contains(e.target)) {
          this.hideUserUnflod();
        }
      });
    //   }
    } else {
      console.log(111);
    } */
    // console.log('refs==>', this.$refs.UserUnflodPage);
  },
  beforeDestroy() { // 实例销毁之前对点击事件进行解绑
    document.documentElement.onclick = () => {};
  },
  methods: {
    ...mapActions([
      'hideUserUnflod',
      'setLanguageZH',
      'setLanguageEN',
      'setLangVuex',
      'userLogout',
    ]),
    changeLaguagesZH() {
      this.$i18n.locale = 'zh-CN';
      set('language', 'zh-CN');
      this.setLanguageZH();
      this.setLangVuex(); // 更改language state里面的值

      /*  this.$store.state.language.flageLanguageZH = true;
      this.$store.state.language.flageLanguageUS = false; */
    },

    changeLaguagesEN() {
      this.$i18n.locale = 'en-US';
      set('language', 'en-US');
      this.setLanguageEN();
      this.setLangVuex(); // 更改language state里面的值

      // console.log('path', this.$route.path);

      // this.$store.state.language.flageLanguageZH = false;
      // this.$store.state.language.flageLanguageUS = true;
      // this.$store.state.language.a = 'a';
    },

    // 跳转到历史订单页面
    gotoOrder() {
      this.$router.push('/order');

      // document.documentElement.getBoundingClientRect();
    },

    gotoLogin() {
      this.$router.push('/login');
    },

    logoutBtn() {
      this.userLogout();
    },

  },

};
</script>

<style lang="scss" scoped>
@import '../../style/color.scss';
.unflod-container{
  display : flex;
  flex-direction : column;
  align-items : center;
  padding : 30px 20px;
  .changeLaguages{
    display : flex;
    justify-content : space-between;
    width : 170px;
    margin : 20px 0;
  }
}

.laguages-button{
width : 40px;
height : 40px;
border : 1px solid #202020;
border-radius : 45px;
}

.color-white{
color : #202020;
background-color : #ffffff;
}
.button{
  width : 170px;
  height : 40px;
  font-size : 14px;
  color : #797979;
  background-color : #fff;
  border : 1px solid #afafaf;
  border-radius : 25px
}
.color-black{
color : #ffffff;
background-color : #202020;
}

</style>
